<template>
  <CardContainer>
    <FormContainer :column="3" :disabled="visible">
      <el-form ref="form" :model="formData" :rules="formRules" label-width="80px">
        <el-form-item prop="customerName" label="客户姓名">
          <el-input v-model="formData.customerName" placeholder="请输入客户姓名" clearable />
        </el-form-item>
        <el-form-item prop="customerPhone" label="来电号码">
          <el-input v-model.trim="formData.customerPhone" placeholder="请输入来电号码" clearable />
        </el-form-item>
        <!-- <el-form-item prop="addr" label="归属地">
          <el-input v-model.trim="formData.addr" placeholder="请输入归属地" clearable />
        </el-form-item> -->
        <el-form-item prop="sapCode" label="SAP编码">
          <el-input v-model.trim="formData.sapCode" placeholder="请输入SAP编码" clearable />
        </el-form-item>
        <el-form-item prop="bpmCode" label="BPM编码">
          <el-input v-model.trim="formData.bpmCode" placeholder="请输入BPM编码" clearable />
        </el-form-item>
        <el-form-item prop="content" label="内容备注" :span="24">
          <el-input
            v-model="formData.content"
            type="textarea"
            :autosize="{minRows:4}"
            placeholder="请输入内容备注"
            clearable
          />
          <p class="input-tip">剩余{{ count }}字</p>
        </el-form-item>
        <el-form-item>
          <Button type="primary" @click="confirmHandle">确认</Button>
          <Button type="primary" @click="resetFormHandle">重置</Button>
        </el-form-item>
      </el-form>
    </FormContainer>
  </CardContainer>
</template>
<script>
import FormContainer from '@/components/FormContainer'
import CardContainer from '@/components/CardContainer'
import { putCreate } from '@/api/telRecord'
import { deepCopy } from '@/utils'
export default {
  name: '',
  components: {
    FormContainer,
    CardContainer
  },
  inject: ['closePage', 'checkClosePage', 'createdTelRecordHandle'],
  props: {
    callTel: {
      type: String,
      default: ''
    },
    callid: {
      type: String,
      default: ''
    },
    recordId: {
      type: String,
      default: ''
    },
    customerName: {
      type: String,
      default: ''
    }
  },
  data() {
    const validatorContent = (r, v, c) => {
      if (v.length <= 0) {
        c(new Error('请输入内容备注'))
        return
      } else if (v.length > 150) {
        c(new Error('最多输入150个字符'))
        return
      }
      // if (v.length > 150) {
      //   c(new Error('最多输入150个字符'))
      //   return
      // }
      c()
    }
    return {
      formData: {
        customerName: '', // 客户姓名
        customerPhone: '', // 来电号码
        // addr: '', // 归属地
        sapCode: '', // sap编码
        bpmCode: '', // bpm编码
        content: '' // 内容备注
      },
      formRules: {
        // customerName: [{ required: true, message: '请输入客户姓名', trigger: 'change' }], // 客户编码
        // customerPhone: [{ required: true, message: '请输入来电号码', trigger: 'change' }], // 来电号码
        // addr: [{ required: true, message: '请输入归属地', trigger: 'change' }], // 归属地
        // sapCode: [{ required: true, message: '请输入SAP编码', trigger: 'change' }], // sap编码
        // bpmCode: [{ required: true, message: '请输入BPM编码', trigger: 'change' }], // bpm编码
        content: [
          { required: true, message: '请输入内容备注', trigger: 'change' },
          { required: true, validator: validatorContent, trigger: 'change' }
        ]
      },
      visible: false
    }
  },
  computed: {
    count() {
      const l = 150 - this.formData.content.length
      return l < 0 ? 0 : l
    }
  },
  watch: {
    customerName(v) {
      this.$set(this.formData, 'customerName', v)
    }
  },
  created() {
    this.$set(this.formData, 'customerPhone', this.callTel)
    this.$set(this.formData, 'customerName', this.customerName)
  },
  methods: {
    // 重置表单
    resetFormHandle() {
      this.$refs.form.resetFields()
    },
    // 确认提交
    confirmHandle() {
      this.createdTelRecordHandle().then(() => {
        this.saveHandle()
      })
    },
    saveHandle() {
      return this.$refs.form.validate().then(() => {
        const data = deepCopy(this.formData)
        data.id = this.recordId
        return putCreate(data).then(res => {
          this.$message.success('保存成功！')
          this.$emit('refresh', 'save')
          // 隐藏按钮
          this.visible = true
          // 关闭弹屏
          this.checkClosePage({ isSaveOther: true })
        })
      })
    }
  }
}
</script>
<style lang='scss' module>
</style>
